<template>
  <div class="commentbox">
    <h2 class="a"><span @click="getAlbumComment" :class="addcolor(1)">全部评论</span>  <span @click="getAlbumhotComment" :class="addcolor(2)">热门评论</span>
    </h2>
    <div class="commentsList" v-for="item in AlbumCommentList" :Key="item">
      <img :src="item.user.avatarUrl" class="avatar">
      <div>
        <p style="line-height: 20px">{{item.user.nickname}}</p>
        <p style="line-height: 10px;word-spacing:5px">{{item.timeStr}}  {{item.ipLocation.location}}</p>
        <p >{{item.content }}</p>
      </div>
    </div>
  </div>
</template>

<script setup>
import {onMounted, ref} from "vue";
import {usealbumDetailStore} from "@/Store/Pinia/pinia";
import axios from "axios";
import {baseURL} from "@/request/index.js";
const albumDetail=usealbumDetailStore();
const AlbumCommentList=ref([]);
const hcolorindex=ref(1)
const getAlbumComment=async ()=>{
  hcolorindex.value=1;
  let a=await axios.post(baseURL+"/comment/album?id="+id.value)
  console.log(a);
  AlbumCommentList.value=a.data.comments;
}
onMounted(()=>{
  getAlbumComment();
})

async function getAlbumhotComment(){
  hcolorindex.value=2;
  let a=await axios.post(baseURL+"/comment/album?id="+id.value)
  AlbumCommentList.value=a.data.hotComments;
}

const ifcolor=ref(true);
function addcolor(index){
  if(hcolorindex.value===index){
    return {active:ifcolor}
  }
}

const id=ref(albumDetail.albumID)
const pCsub=albumDetail.$subscribe((mutation,state)=>{
  id.value=state.albumID;
},{detached:false})
</script>

<style scoped>
.commentbox{
  height: 300px;
  margin-left: 100px;
  overflow-x: hidden;
  overflow-y: scroll;
}
.commentsList{
  width: 100%;
  height: 100px;
  display: flex;
  margin-top: 10px;
  border-bottom:1px solid rgba(65, 105, 225, 0.09);
}

.avatar{
  width: 50px;
  height: 50px;
  border-radius: 50%;
}
.a span:hover{
  cursor: pointer;
  color: #42b983;
}
.active{
  color: #42b983;
}
</style>